<template>
	<!-- 视图容器 -->
	<view>
		<!-- 顶部视频播放区域 -->
		<view class="allBoder">
			<view class="videoBoder">
				<!-- 视频组件 -->
				<video id="myVideo" :src=videoItem.fields.src @error="videoErrorCallback" :danmu-list="danmuList"
					enable-danmu danmu-btn controls autoplay>
				</video>
				<!--  @error="videoErrorCallback"监听视频错误 -->
				<!-- 绑定弹幕列表 -->
				<!-- 启用弹幕功能 -->
				<!-- 显示弹幕开关按钮 -->
				<!-- 显示视频控制条 -->
			</view>

			<!-- 弹幕内容输入区域 -->
			<view class="uni-list">
				<view class="uni-list-cell">
					<view>
						<view class="danmu-title">
							<span>视频标题：</span>
							{{videoItem.fields.title}}
						</view>
					</view>
					<view class="uni-list-cell-db">
						<!-- 输入框，v-model绑定输入值到danmuValue -->
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>

			<!-- 发送弹幕按钮 -->
			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view>
		</view>
	</view>
	{{videoItem.pk}}
</template>

<script>
	export default {
		data() {
			return {
				danmuList: [],
				danmuValue: '', // 输入框中的弹幕内容
				videosAllData: [],
				videoItem: [],
			};
		},
		onReady: function(res) {
			// 视频组件加载完成时，创建videoContext对象
			this.videoContext = uni.createVideoContext('myVideo');
		},

		methods: {
			// 发送弹幕
			sendDanmu: function() {
				// 调用videoContext对象的sendDanmu方法发送弹幕
				this.videoContext.sendDanmu({
					text: this.danmuValue, // 弹幕内容从data中的danmuValue取得
					color: this.getRandomColor(), // 随机获取弹幕颜色
				});

				const LoginResponse = uni.getStorageSync('LoginResponse')
				const userID = LoginResponse.id
				console.log("发弹幕的userid:", userID, "视频id", this.videoItem.pk, ",弹幕内容", this.danmuValue)
				let that = this
				uni.request({
					url: "http://127.0.0.1:8002/insertDanmu",
					method: "GET",
					data: {
						user_id: userID,
						video_id: that.videoItem.pk,
						content: that.danmuValue
					},
					success(res) {
						console.log(res)
					},
				});

				this.danmuValue = ''; // 清空输入框中的弹幕内容
			},
			// 视频错误回调函数
			videoErrorCallback: function(e) {
				// 显示模态框，提示错误信息
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false,
				});
			},
			// 随机生成弹幕颜色
			getRandomColor: function() {
				const rgb = [];
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16); // 生成0~255的随机整数，并转为16进制字符串
					color = color.length == 1 ? '0' + color : color; // 保证颜色字符串是两位
					rgb.push(color);
				}
				return '#' + rgb.join(''); // 返回完整的颜色字符串，格式为#RRGGBB
			},
		},
		onLoad: function(option) {
			let that = this;

			console.log("视频的ID：", option.id)
			uni.request({
				url: "http://127.0.0.1:8002/getVideos",
				method: "GET",
				success(res) {
					console.log("全部视频的数据：", res.data.data);
					const allData = res.data.data;
					that.videosAllData = res.data.data;
					for (const allDataItem of allData) {
						if (allDataItem.pk == option.id) {
							that.videoItem = allDataItem
							console.log("验证是否赋值成功" + that.videoItem)
						}
					}
				},
			});




			uni.request({
				url: "http://127.0.0.1:8002/getDanmu",
				method: "GET",
				success(res) {
					console.log("弹幕的数据：", res.data.danmu);
					const danmuData = res.data.danmu;
					for (const danmuItem of danmuData) {
						const videoInt = parseInt(danmuItem.videoId, 10);
						console.log(danmuItem.time)
						console.log(danmuItem.text)
						console.log(danmuItem.color)
						if(videoInt == option.id){
							const timeAsInt = parseInt(danmuItem.time, 10);
							that.danmuList.push({
								text: danmuItem.text,
								time: timeAsInt,
								color: danmuItem.color,
							});
						}
					}
				},
			});
		}
	};
</script>

<style>
	/* 设置视频宽度为屏幕宽度 */
	#myVideo {
		width: 100%;
	}

	.uni-list,
	.allBoder,
	.videoBoder {
		margin: 10rpx;
	}

	/* 调整弹幕内容输入区域的样式 */
	.uni-list-cell-db {
		margin-top: 10rpx;
		height: 60rpx;
	}
</style>
